<template>
  <div class="notice-container">
    <h2>校园通知</h2>
    
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="filter-card">
          <template #header>
            <div class="card-header">
              <span>通知分类</span>
            </div>
          </template>
          
          <el-menu
            :default-active="activeCategory"
            @select="handleCategorySelect">
            <el-menu-item index="all">
              <el-icon><Document /></el-icon>
              <span>全部通知</span>
            </el-menu-item>
            <el-menu-item index="academic">
              <el-icon><Reading /></el-icon>
              <span>学业通知</span>
            </el-menu-item>
            <el-menu-item index="activity">
              <el-icon><Flag /></el-icon>
              <span>活动通知</span>
            </el-menu-item>
            <el-menu-item index="administrative">
              <el-icon><OfficeBuilding /></el-icon>
              <span>行政通知</span>
            </el-menu-item>
            <el-menu-item index="favorites">
              <el-icon><Star /></el-icon>
              <span>我的收藏</span>
            </el-menu-item>
          </el-menu>
        </el-card>
      </el-col>
      
      <el-col :span="18">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>{{ getCategoryName(activeCategory) }}</span>
              <div class="header-actions">
                <el-input
                  v-model="searchKeyword"
                  placeholder="搜索通知..."
                  style="width: 200px; margin-right: 10px;"
                  clearable>
                  <template #prefix>
                    <el-icon><Search /></el-icon>
                  </template>
                </el-input>
                <el-button @click="refreshNotices">刷新</el-button>
              </div>
            </div>
          </template>
          
          <div class="notice-list" v-loading="loading">
            <div 
              v-for="notice in filteredNotices" 
              :key="notice.id" 
              class="notice-item"
              @click="viewNoticeDetail(notice)">
              <div class="notice-header">
                <h3 class="notice-title">{{ notice.title }}</h3>
                <el-tag :type="getNoticeType(notice.category)" size="small">
                  {{ getCategoryName(notice.category) }}
                </el-tag>
              </div>
              <div class="notice-meta">
                <span class="publisher">{{ notice.publisher }}</span>
                <span class="publish-time">{{ notice.publishTime }}</span>
              </div>
              <div class="notice-summary">
                {{ notice.summary }}
              </div>
              <div class="notice-actions">
                <el-button 
                  :type="notice.isFavorite ? 'warning' : 'default'" 
                  size="small" 
                  @click.stop="toggleFavorite(notice)">
                  <el-icon><Star /></el-icon>
                  {{ notice.isFavorite ? '已收藏' : '收藏' }}
                </el-button>
              </div>
            </div>
            
            <el-empty v-if="filteredNotices.length === 0" description="暂无通知" />
          </div>
          
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="handlePageChange"
            class="pagination">
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 通知详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="selectedNotice.title" width="60%">
      <div class="notice-detail">
        <div class="notice-meta">
          <el-tag :type="getNoticeType(selectedNotice.category)" size="small">
            {{ getCategoryName(selectedNotice.category) }}
          </el-tag>
          <span class="publisher">{{ selectedNotice.publisher }}</span>
          <span class="publish-time">{{ selectedNotice.publishTime }}</span>
        </div>
        
        <div class="notice-content" v-html="selectedNotice.content"></div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button 
            :type="selectedNotice.isFavorite ? 'warning' : 'default'" 
            @click="toggleFavorite(selectedNotice)">
            <el-icon><Star /></el-icon>
            {{ selectedNotice.isFavorite ? '已收藏' : '收藏' }}
          </el-button>
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Document, Reading, Flag, OfficeBuilding, Star, Search } from '@element-plus/icons-vue'

export default {
  name: 'Notices',
  components: {
    Document,
    Reading,
    Flag,
    OfficeBuilding,
    Star,
    Search
  },
  data() {
    return {
      activeCategory: 'all',
      searchKeyword: '',
      loading: false,
      notices: [
        {
          id: 1,
          title: '关于2024-2025学年秋季学期选课的通知',
          category: 'academic',
          publisher: '教务处',
          publishTime: '2024-10-21 15:30',
          summary: '2024-2025学年秋季学期选课工作将于10月25日开始，请同学们按时完成选课...',
          content: '<p>2024-2025学年秋季学期选课工作将于10月25日开始，请同学们按时完成选课。</p><p>选课时间安排：</p><ul><li>选课开始时间：2024年10月25日 08:00</li><li>选课结束时间：2024年11月5日 22:00</li></ul><p>注意事项：</p><ol><li>请提前登录选课系统，确认个人信息无误</li><li>选课期间如遇问题，请及时联系教务处</li></ol>',
          isFavorite: true
        },
        {
          id: 2,
          title: '校园文化艺术节活动安排',
          category: 'activity',
          publisher: '学生会',
          publishTime: '2024-10-20 10:15',
          summary: '2024年校园文化艺术节即将开幕，各项精彩活动等你参与...',
          content: '<p>2024年校园文化艺术节即将开幕，各项精彩活动等你参与！</p><p>活动时间：2024年11月1日 - 11月30日</p><p>主要活动包括：</p><ul><li>校园歌手大赛</li><li>舞蹈比赛</li><li>书法绘画展览</li><li>话剧表演</li></ul><p>报名方式：关注学生会官方微信公众号，点击"艺术节报名"进行报名。</p>',
          isFavorite: false
        },
        {
          id: 3,
          title: '关于校园网络升级的通知',
          category: 'administrative',
          publisher: '网络中心',
          publishTime: '2024-10-19 14:20',
          summary: '为提升校园网络服务质量，网络中心将于近期进行网络设备升级...',
          content: '<p>为提升校园网络服务质量，网络中心将于近期进行网络设备升级。</p><p>升级时间：2024年10月25日 00:00 - 06:00</p><p>影响范围：全校网络</p><p>注意事项：</p><ol><li>升级期间校园网络将暂时中断</li><li>请提前安排好学习和工作</li><li>如有紧急网络需求，请联系网络中心值班电话</li></ol>',
          isFavorite: false
        }
      ],
      total: 100,
      pageSize: 10,
      currentPage: 1,
      detailDialogVisible: false,
      selectedNotice: {}
    }
  },
  computed: {
    filteredNotices() {
      let result = this.notices
      
      // 按分类过滤
      if (this.activeCategory !== 'all') {
        if (this.activeCategory === 'favorites') {
          result = result.filter(notice => notice.isFavorite)
        } else {
          result = result.filter(notice => notice.category === this.activeCategory)
        }
      }
      
      // 按关键字搜索
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase()
        result = result.filter(notice => 
          notice.title.toLowerCase().includes(keyword) || 
          notice.summary.toLowerCase().includes(keyword)
        )
      }
      
      return result
    }
  },
  methods: {
    handleCategorySelect(category) {
      this.activeCategory = category
    },
    getCategoryName(category) {
      const categoryMap = {
        'all': '全部通知',
        'academic': '学业通知',
        'activity': '活动通知',
        'administrative': '行政通知',
        'favorites': '我的收藏'
      }
      return categoryMap[category] || '未知分类'
    },
    getNoticeType(category) {
      const typeMap = {
        'academic': 'primary',
        'activity': 'success',
        'administrative': 'warning'
      }
      return typeMap[category] || 'info'
    },
    refreshNotices() {
      this.loading = true
      // 模拟刷新数据
      setTimeout(() => {
        this.loading = false
        this.$message.success('刷新成功')
      }, 500)
    },
    handlePageChange(page) {
      this.currentPage = page
      this.loading = true
      // 模拟分页加载
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    viewNoticeDetail(notice) {
      this.selectedNotice = notice
      this.detailDialogVisible = true
    },
    toggleFavorite(notice) {
      notice.isFavorite = !notice.isFavorite
      if (this.detailDialogVisible) {
        this.selectedNotice.isFavorite = notice.isFavorite
      }
      this.$message.success(notice.isFavorite ? '收藏成功' : '已取消收藏')
    }
  }
}
</script>

<style scoped>
.notice-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-card {
  height: 100%;
}

.notice-list {
  min-height: 400px;
}

.notice-item {
  padding: 15px;
  border-bottom: 1px solid #e4e7ed;
  cursor: pointer;
  transition: background-color 0.3s;
}

.notice-item:hover {
  background-color: #f5f7fa;
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.notice-title {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.notice-meta {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #909399;
}

.publisher {
  margin-right: 15px;
}

.notice-summary {
  margin-bottom: 10px;
  color: #606266;
  line-height: 1.5;
}

.notice-actions {
  text-align: right;
}

.notice-detail .notice-meta {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.notice-content {
  line-height: 1.8;
  color: #303133;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>